<template>
	<div id="app">
		<div style="text-align: center;">
			<input ref="input" type="text" @click.prevent.stop="show" readonly v-model="number">
		</div>
		<vue-number-panel
			:visible.sync="visible"
			@input="input"
			@clear="clear"
			@remove="remove">
		</vue-number-panel>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data(){
			return {
				number: '',
				visible: false
			}
		},
		methods: {
			show(){
				this.visible = true
			},
	    input(number){
	      	this.number = number
	    },
	    clear(number){
	      	this.number = number
	    },
	    remove(number){
	      	this.number = number
	    }
		}
	}
</script>

<style scoped>
	input{
		width: 80%;
		height: 26px;
		padding: 0 10px;
		border: 1px solid #E6E6E6;
		border-radius: 18px;
		outline: none;
	}
</style>